<template>
  <div class="container">
    <h3>
      宝龙大厦{{ data.detailData.roomNumber }}室{{
        data.detailData.month
      }}月份通知单
    </h3>
    <table border="1" cellspacing="0" cellpadding="0" class="tableOne">
      <tr>
        <td>缴费区间</td>
        <td>项目</td>
        <td>金额</td>
        <td>备注</td>
      </tr>
      <tr>
        <td rowspan="7">
          {{ data.Nextyear }}年{{ data.Nextmonth }}月租金<br />{{
            data.detailData.year
          }}年{{ data.detailData.month }}月水电
        </td>
        <td>租金</td>
        <td>{{ data.detailData.rent }}</td>
        <td></td>
      </tr>
      <tr>
        <td>卫生费</td>
        <td>{{ data.detailData.health }}</td>
        <td></td>
      </tr>
      <tr>
        <td>管理费</td>
        <td>{{ data.detailData.management }}</td>
        <td></td>
      </tr>
      <tr>
        <td>电梯费</td>
        <td>{{ data.detailData.elevator }}</td>
        <td></td>
      </tr>
      <tr>
        <td>水费</td>
        <td>{{ data.detailData.waterRate }}</td>
        <td></td>
      </tr>
      <tr>
        <td>电费</td>
        <td>{{ data.detailData.electyRate }}</td>
        <td></td>
      </tr>
      <tr>
        <td>公摊电费</td>
        <td>{{ data.detailData.sharedElecty }}</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>总计(小写)</td>
        <td>￥{{ data.detailData.total }}</td>
        <td></td>
      </tr>
    </table>

    <table
      style="text-align: center"
      border="1"
      cellspacing="0"
      cellpadding="0"
    >
      <tr>
        <td>本次用电抄表</td>
        <td>{{ data.detailData.theElectyNumber }}</td>
        <td>上次用电抄表</td>
        <td>{{ data.detailData.lastElectyNumber }}</td>
        <td>本次用电数</td>
        <td>
          {{
            data.detailData.theElectyNumber - data.detailData.lastElectyNumber
          }}
        </td>
        <td>度</td>
      </tr>
      <tr>
        <td>本次用水抄表</td>
        <td>{{ data.detailData.theWaterNumber }}</td>
        <td>上次用水抄表</td>
        <td>{{ data.detailData.lastWaterNumber }}</td>
        <td>本次用水数</td>
        <td>
          {{ data.detailData.theWaterNumber - data.detailData.lastWaterNumber }}
        </td>
        <td>吨</td>
      </tr>
    </table>

    <table cellspacing="0" cellpadding="0">
      <tr>
        <td style="font-weight: bold">
          以上费用务必在当月5日前交纳，逾期每天加缴5%的滞纳金，谢谢合作！
        </td>
      </tr>
      <tr>
        <td style="font-weight: bold">
          <span style="padding-right: 20px">开户名：{{ data.userName }}</span>
          <span style="padding-right: 20px">账号：{{ data.bankNumber }}</span>
          <span>开户行：{{ data.accountName }}</span>
        </td>
      </tr>
    </table>

    <table border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td style="text-align: center; font-weight: bold">收据</td>
      </tr>
      <tr>
        <td>
          <span style="padding-right: 200px"
            >今天收：{{ data.detailData.roomUserName }}</span
          ><span>房号：{{ data.detailData.roomNumber }}室</span>
        </td>
      </tr>
      <tr>
        <td>
          {{ data.Nextyear }}年{{ data.Nextmonth }}月租金{{
            data.detailData.year
          }}年{{ data.detailData.month }}月水电
        </td>
      </tr>
      <tr>
        <td>金额(大写)：{{ CHtotal }}</td>
      </tr>
      <tr>
        <td>
          <span style="padding-right: 200px"
            >核准：{{ data.detailData.roomUserName }}</span
          ><span style="padding-right: 200px"
            >记账：{{ data.detailData.roomUserName }}</span
          ><span>经手人：{{ data.detailData.roomUserName }}</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts">
import { getPropertyInfo, roomCostInfo } from "@/api";
import { defineComponent, onMounted, reactive, ref, watchEffect } from "vue";
import { ElMessage } from "element-plus";

export default defineComponent({
  components: {},
  props: {
    detail: {
      require: true,
      type: Object,
    },
  },
  setup(props, context) {
    const data = reactive({
      detailData: {} as any,
      Nextyear: 0,
      Nextmonth: 0,
      userName: "",
      bankNumber: "",
      accountName: "",
    });
    const CHtotal = ref("");
    const toChinese = (n: any) => {
      if (n === 0) return "零";
      if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)) return "";
      var unit = "仟佰拾亿仟佰拾万仟佰拾元角分",
        str = "";
      n += "00";
      var p = n.indexOf(".");
      if (p >= 0) n = n.substring(0, p) + n.substr(p + 1, 2);
      unit = unit.substr(unit.length - n.length);
      for (var i = 0; i < n.length; i++)
        str += "零壹贰叁肆伍陆柒捌玖".charAt(n.charAt(i)) + unit.charAt(i);
      return str
        .replace(/零(仟|佰|拾|角)/g, "零")
        .replace(/(零)+/g, "零")
        .replace(/零(万|亿|元)/g, "$1")
        .replace(/(亿)万/g, "$1$2")
        .replace(/^元零?|零分/g, "")
        .replace(/元$/g, "元整");
    };

    watchEffect(() => {
      data.detailData = props.detail;
      console.log(data.detailData, 11);
      CHtotal.value = toChinese(data.detailData.total);
      if (data.detailData.month < 12) {
        data.Nextyear = data.detailData.year;
        data.Nextmonth = data.detailData.month + 1;
      } else {
        data.Nextyear = data.detailData.year + 1;
        data.Nextmonth = 1;
      }
    });
    // 获取物业信息
    const initPropertyInfo = async () => {
      await getPropertyInfo().then((res) => {
        console.log(res);
        data.userName = res[0].userName;
        data.bankNumber = res[0].bankNumber;
        data.accountName = res[0].accountName;
      });
    };
    onMounted(() => {
      initPropertyInfo();
    });
    return {
      data,
      toChinese,
      CHtotal,
    };
  },
});
</script>

<style lang="scss" scoped>
.container {
  display: block;
  h3 {
    text-align: center;
    margin-bottom: 10px;
  }
  h4 {
    height: 30px;
    line-height: 30px;
  }
  table {
    width: 100%;
  }
  .tableOne {
    text-align: center;
    td {
      width: 25%;
    }
  }
  tr {
    height: 23px;
  }
}
</style>
